@import '../../style/theme';

$tabs-prefix-cls: #{$anna-prefix}-tabs;

.#{$tabs-prefix-cls} {
  &-header{
    &-titles{
      position: relative;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      font-size: 26px;
      &-bg{
        padding: 6px;
        background-color: #EDEDED;
        border-radius: 72px;
        &-container{
          display: flex;
          justify-content: center;
          height: 60px;
          line-height: 60px;
          overflow: hidden;
          position: relative;
          z-index: 0;
          &-title{
            width: 140px;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          }
          &-active{
            position: absolute;
            left: 0;
            background-color: $view-bg-color;
            width: 50%;
            height: 100%;
            border-radius: 60px;
            z-index: -1;
            transform: translateX(0);
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          }
        }
        &-square{
          border-radius: 16px;
          .#{$tabs-prefix-cls}-header-titles-bg-container-active{
            border-radius: 12px;
          }
        }
      }
    }
    &-titles-plain{
      display: flex;
      margin-bottom: 10px;
      &-title{
        box-sizing: border-box;
        position: relative;
        height: 72px;
        line-height: 72px;
        white-space: nowrap;
        margin-right: 50px;
        color: #000;
      }
      &-title-active{
        font-weight: 500;
        &::after{
          position: absolute;
          left: 0;
          bottom: 0;
          content: '';
          height: 6px;
          border-radius: 6px;
          width: 100%;
          background-color: #1890FF;
          transform: scale(0.5, 1);
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
        }
      }
    }
    &-titles-card{
      box-sizing: border-box;
      display: flex;
      border: 1PX solid #1890FF;
      margin-bottom: 10px;
      font-size: 28px;
      border-radius: 12px;
      overflow: hidden;
      &-title{
        flex: 1;
        box-sizing: border-box;
        height: 56px;
        line-height: 56px;
        white-space: nowrap;
        color: #1890FF;
        text-align: center;
        border-right: 1PX solid #1890FF;
        &:nth-last-child(1){
          border-right: none;
        }
      }
      &-title-active{
        font-weight: 500;
        color: #FDFFFD;
        background-color: #1890FF;
      }
    }
    &-content{
      
    }
  }
  &-content{

  }
}

